<template>
  <div class="icon-number">
    <div class="icon" :style="`background:url('${path}') no-repeat center;background-size:100% 100%;`"></div>
    <div class="name">{{name}}</div>
    <div class="value">{{value}}</div>
  </div>
</template>

<script>
export default {
  name: "IconNumber",
  props:{
    icon:{
      type:String,
      default:'',
    },
    name:{
      type:String,
      default:'',
    },
    value:{
      type:String,
      default:'',
    }
  },
  computed:{
    path(){
      switch (this.icon){
        case '@/assets/images/statistical4/1.png':
          return require('@/assets/images/statistical4/1.png');
        case '@/assets/images/statistical4/2.png':
          return require('@/assets/images/statistical4/2.png');
        case '@/assets/images/statistical4/3.png':
          return require('@/assets/images/statistical4/3.png');
        case '@/assets/images/statistical4/4.png':
          return require('@/assets/images/statistical4/4.png');
        case '@/assets/images/statistical4/5.png':
          return require('@/assets/images/statistical4/5.png');
        default:
          return '';
      }
    }
  }
}
</script>

<style scoped lang="scss">
.icon-number{
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon{
    width: 105px;
    height: 105px;
  }
  .name,.value{
    margin-top: 10px;
    color: #fff;
  }
}
</style>
